<!--
 * @Description: 流转条件
 * @Author: DHL
 * @Date: 2022-08-04 17:02:01
 * @LastEditors: DHL
 * @LastEditTime: 2023-06-13 08:56:57
-->
<template>
  <div class="process-panel-tab__content">
    <el-form ref="dbFormRef" :model="dbForm" label-width="80px">
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="dbForm.type" @change="handleUpdateFlowType">
          <el-radio-button label="normal">普通流转</el-radio-button>
          <el-radio-button label="default">默认流转</el-radio-button>
          <el-radio-button label="condition">条件流转</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="条件格式" v-if="dbForm.type === 'condition'" prop="condition">
        <el-radio-group v-model="dbForm.conditionType">
          <el-radio-button label="expression">表达式</el-radio-button>
          <el-radio-button label="script">脚本</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="表达式"
        v-if="dbForm.conditionType && dbForm.conditionType === 'expression'"
        prop="express"
      >
        <el-input
          v-model="dbForm.body"
          type="textarea"
          :autosize="{ minRows: 3 }"
          clearable
          @change="handleUpdateFlowCondition"
        />
      </el-form-item>

      <template v-if="dbForm.conditionType && dbForm.conditionType === 'script'">
        <el-form-item label="脚本语言" prop="language">
          <el-input v-model="dbForm.language" clearable @change="handleUpdateFlowCondition" />
        </el-form-item>

        <el-form-item label="脚本类型" prop="scriptType">
          <el-radio-group v-model="dbForm.scriptType">
            <el-radio-button label="inlineScript">内联脚本</el-radio-button>
            <el-radio-button label="externalScript">外部脚本</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="脚本" v-if="dbForm.scriptType === 'inlineScript'" prop="body">
          <el-input
            v-model="dbForm.body"
            type="textarea"
            :autosize="{ minRows: 3 }"
            clearable
            @change="handleUpdateFlowCondition"
          />
        </el-form-item>

        <el-form-item
          label="资源地址"
          v-if="dbForm.scriptType === 'externalScript'"
          prop="resource"
        >
          <el-input
            v-model="dbForm.resource"
            type="textarea"
            :autosize="{ minRows: 3 }"
            clearable
            @change="handleUpdateFlowCondition"
          />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script lang="ts">
  export default { name: 'PanelFlowCondition' }
</script>

<script setup lang="ts">
  import { assign } from 'lodash-es'
  import { useBpmnStore } from '../../store/bpmn'
  const bpmnStore = useBpmnStore()

  let bpmnElementSource: any = null
  let bpmnElementSourceRef: any = null

  watch(
    () => bpmnStore.activatedElementId,
    (newVal) => {
      if (newVal) {
        nextTick(() => {
          handleResetFlowCondition()
        })
      }
    },
    {
      immediate: true
    }
  )

  const dbForm = reactive({
    type: '',
    resource: '',
    conditionType: '',
    scriptType: '',
    language: '',
    body: ''
  })

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////

  /**
   * 重置流程
   */
  function handleResetFlowCondition() {
    assign(dbForm, {
      type: '',
      resource: '',
      conditionType: '',
      scriptType: '',
      language: '',
      body: ''
    })

    bpmnElementSource = bpmnStore.activatedElement.source
    bpmnElementSourceRef = bpmnStore.activatedElement.businessObject.sourceRef

    if (
      bpmnElementSourceRef &&
      bpmnElementSourceRef.default &&
      bpmnElementSourceRef.default.id === bpmnStore.activatedElementId
    ) {
      // 默认
      dbForm.type = 'default'
    } else if (!bpmnStore.activatedElement.businessObject.conditionExpression) {
      // 普通
      dbForm.type = 'normal'
    } else {
      // 带条件
      const conditionExpression = bpmnStore.activatedElement.businessObject.conditionExpression

      Object.assign(dbForm, conditionExpression, { type: 'condition' })

      // resource 可直接标识 是否是外部资源脚本
      if (dbForm.resource) {
        Object.assign(dbForm, {
          conditionType: 'script',
          scriptType: 'externalScript'
        })
        return
      }
      if (conditionExpression.language) {
        Object.assign(dbForm, {
          conditionType: 'script',
          scriptType: 'inlineScript'
        })
        return
      }

      Object.assign(dbForm, {
        conditionType: 'expression'
      })
    }
  }

  /**
   * 更新流程类型
   */
  function handleUpdateFlowType(flowType: any) {
    assign(dbForm, {
      resource: '',
      conditionType: '',
      scriptType: '',
      language: '',
      body: ''
    })

    // 正常条件类
    if (flowType === 'condition') {
      const flowConditionRef = bpmnStore.moddle.create('bpmn:FormalExpression')
      bpmnStore.updateProperties({
        conditionExpression: flowConditionRef
      })
      return
    }

    bpmnStore.updateProperties({
      conditionExpression: null
    })

    // 默认路径
    if (flowType === 'default') {
      bpmnStore.modeling.updateProperties(bpmnElementSource, {
        default: bpmnStore.activatedElement
      })

      return
    }

    // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
    if (
      bpmnElementSourceRef.default &&
      bpmnElementSourceRef.default.id === bpmnStore.activatedElementId
    ) {
      bpmnStore.modeling.updateProperties(bpmnElementSource, {
        default: null
      })
    }

    bpmnStore.modeling.updateProperties(bpmnElementSource, {
      conditionExpression: null
    })
  }

  /**
   * 更新条件
   */
  function handleUpdateFlowCondition() {
    const { conditionType, scriptType, body, resource, language } = dbForm

    let condition

    if (conditionType === 'expression') {
      condition = bpmnStore.createModdleElement('bpmn:FormalExpression', { body })
    } else {
      if (scriptType === 'inlineScript') {
        condition = bpmnStore.createModdleElement('bpmn:FormalExpression', { body, language })
        dbForm.resource = ''
      } else {
        condition = bpmnStore.createModdleElement('bpmn:FormalExpression', {
          resource,
          language
        })
        dbForm.body = ''
      }
    }
    bpmnStore.updateProperties({
      conditionExpression: condition
    })
  }
</script>

<style scoped lang="scss"></style>
